<script setup lang="ts">
    import { reactive, ref } from 'vue' //导入vue相关函数
    import type { FormInstance } from 'element-plus' //导入表单实例类型
    import { ElMessage } from 'element-plus' //导入消息框
    import { useRouter } from "vue-router" //导入路由useRouter函数
    import { login } from "@/api" //导入axios接口
    import { useToken } from '@/stores/token' //导入token状态文件
    import { useUser } from '@/stores/user' //导入user状态文件

    //执行方法获得tokenStore对象
    const tokenStore = useToken()
    //执行方法获得userStore对象
    const userStore = useUser()

    //获得路由实例
    const router = useRouter();

    
    //定义表单数据对象
    const user = reactive({
        username: "demo1",
        password: "123456",
        agree: true
    })

    //定义表单对象实例的引用
    const formRef = ref<FormInstance>()


    //定义表单验证规则
    const rules = reactive({
        username:[
            { required:true, message:"用户名不能为空", trigger:"blur"}
        ],
        password:[
            { required:true, message:"密码不能为空", trigger:"blur"},
            { min:6, max:24, message:"密码长度为6~24个字符", trigger:"blur"}
        ],
        agree:[
            {
                validator:(_rule:any, value:any, callback:any)=>{
                    if(value){
                        callback()
                    }
                    else{
                        callback(new Error("请勾选协议"))
                    }
                }
            }
        ]
    })

    //表单提交
    const checkLogin = async ()=>{
        await formRef.value?.validate(async (valid, _fields)=>{
            if(valid){
                const res = await login(user)
                if(res.data.errno == 0){
                    //更新token状态
                    tokenStore.updateToken(res.data.data.token)
                    //更新用户状态
                    await userStore.updateUser()
                    //登录成功
                    ElMessage({type:"success", message:res.data.errmsg})
                    //后退到上一页
                    router.back()
                }
                else{
                    //登录失败
                    ElMessage({type:"error", message:res.data.errmsg})
                }
            }
        })
    }
</script>

<template>
    <!--网页头部-->
    <header>
        <div><img src="@/assets/images/logo.png" /></div>
        <div><RouterLink to="/">进入网站首页&raquo;</RouterLink></div>
    </header>

    <!--正文内容-->
    <section>
        <div>
            <div>账户登录</div>
            <div>
                <el-form ref="formRef" :model="user" :rules="rules"  label-width="60px" label-position="right" status-icon>
                    <el-form-item label="账户" prop="username">
                        <el-input v-model="user.username" />
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="user.password" type="password" />
                    </el-form-item>
                    <el-form-item label-width="20px" prop="agree">
                        <el-checkbox v-model="user.agree">我已同意隐私条款和服务条款</el-checkbox>
                    </el-form-item>
                    <el-form-item label-width="0px">
                        <el-button type="primary" size="large" class="loginBtn" @click="checkLogin">点击登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </section>

    <!--网页脚注-->
    <footer>
        <ul>
            <li>关于我们</li>
            <li>帮助中心</li>
            <li>售后服务</li>
            <li>配送与验收</li>
            <li>商务合作</li>
            <li>搜索推荐</li>
            <li>友情链接</li>
        </ul>
        <div>CopyRight &copy; EasyGo</div>
    </footer>
</template>

<style scoped>
    header{
        width:1200px;
        margin:20px auto;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
    header img{
        width:200px;
    }
    header a{
        color:#333333;
        text-decoration:none;
    }
    section{
        width:100%;
        min-width: 1200px;
        height:500px;
        background:url("@/assets/images/login-bg.png") no-repeat center/cover;
        position:relative;
    }
    section > div{
        width:400px;
        background:#FFFFFF;
        position:absolute;
        right:270px;
        top:70px;
    }
    section > div > div:first-child{
        font-size:20px;
        text-align:center;
        line-height:70px;
        border-bottom:1px solid #EDF0F0;
    }
    section > div > div:last-child{
        padding:20px 20px 0px 20px;
    }
    section .loginBtn{
        width:100%;
    }
    footer{
        color:#999999;
        width:1200px;
        margin:0px auto;
    }
    footer ul{
        width:100%;
        margin:20px auto;
        display:flex;
        justify-content:center;
    }
    footer ul li{
        width:80px;
        text-align:center;
    }
    footer ul li:not(:last-child){
        border-right:1px solid #999999;
    }
    footer div{
        width:100%;
        margin:20px auto;
        text-align:center;
    }
</style>
